<template>
	<view>
		<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#FF9E5D" @change="change" :current='current'></u-tabs-swiper>
		<swiper :duration="1000" :style="{height:swiperHeight+'px'}" @change="swiperChange" :current="swiperCurrent" class="swiper_box">
			<!-- 全部订单 -->
			<swiper-item>
				<scroll-view scroll-y="true" class="scroll_box">
					<view class="order_list" v-for="(allItem,allIndex) in 6" :key='allIndex'>
						<view class="order_list_content">
							<image src="/static/1018.png" mode=""></image>
							<view class="content_txt">
								<view class="content_txt_top">
									<text class="top_people">雇佣师傅：李三</text>
									<text>等待上门</text>
								</view>
								<view class="content_txt_bottom">
									<text>施工时间：9月5日 至 9月6日 </text>
								</view>
								<view class="content_txt_bottom">
									<text>工种：水电、开锁、水电</text>
								</view>
							</view>
						</view>
						<view class="order_list_button">
							<view class="button_style">
								<image src="/static/icon_dh.png"></image>
								<text>联系师傅</text>
							</view>
							<view class="button_style_other" @tap='cancelOrder'>
								<text>取消订单</text>
							</view>
							<!-- <view class="button_style_other_now">
								<text class="other_txt">正在施工</text>
							</view> -->
							<!-- <view class="button_style_other">
								<text>评价</text>
							</view> -->
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" class="scroll_box">
					<view class="order_list" v-for="(allItem,allIndex) in 6" :key='allIndex'>
						<view class="order_list_content">
							<image src="/static/1018.png" mode=""></image>
							<view class="content_txt">
								<view class="content_txt_top">
									<text class="top_people">雇佣师傅：李三</text>
									<text>等待上门</text>
								</view>
								<view class="content_txt_bottom">
									<text>施工时间：9月5日 至 9月6日 </text>
								</view>
								<view class="content_txt_bottom">
									<text>工种：水电、开锁、水电</text>
								</view>
							</view>
						</view>
						<view class="order_list_button">
							<view class="button_style">
								<image src="/static/icon_dh.png"></image>
								<text>联系师傅</text>
							</view>
							<view class="button_style_other">
								<text>取消订单</text>
							</view>
							<!-- <view class="button_style_other_now">
								<text class="other_txt">正在施工</text>
							</view> -->
							<!-- <view class="button_style_other">
								<text>评价</text>
							</view> -->
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" class="scroll_box">
					<view class="order_list" v-for="(allItem,allIndex) in 6" :key='allIndex'>
						<view class="order_list_content">
							<image src="/static/1018.png" mode=""></image>
							<view class="content_txt">
								<view class="content_txt_top">
									<text class="top_people">雇佣师傅：李三</text>
									<text>等待上门</text>
								</view>
								<view class="content_txt_bottom">
									<text>施工时间：9月5日 至 9月6日 </text>
								</view>
								<view class="content_txt_bottom">
									<text>工种：水电、开锁、水电</text>
								</view>
							</view>
						</view>
						<view class="order_list_button">
							<view class="button_style">
								<image src="/static/icon_dh.png"></image>
								<text>联系师傅</text>
							</view>
							<view class="button_style_other">
								<text>取消订单</text>
							</view>
							<!-- <view class="button_style_other_now">
								<text class="other_txt">正在施工</text>
							</view> -->
							<!-- <view class="button_style_other">
								<text>评价</text>
							</view> -->
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" class="scroll_box">
					<view class="order_list" v-for="(allItem,allIndex) in 6" :key='allIndex'>
						<view class="order_list_content">
							<image src="/static/1018.png" mode=""></image>
							<view class="content_txt">
								<view class="content_txt_top">
									<text class="top_people">雇佣师傅：李三</text>
									<text>等待上门</text>
								</view>
								<view class="content_txt_bottom">
									<text>施工时间：9月5日 至 9月6日 </text>
								</view>
								<view class="content_txt_bottom">
									<text>工种：水电、开锁、水电</text>
								</view>
							</view>
						</view>
						<view class="order_list_button">
							<view class="button_style">
								<image src="/static/icon_dh.png"></image>
								<text>联系师傅</text>
							</view>
							<view class="button_style_other" >
								<text>取消订单</text>
							</view>
							<!-- <view class="button_style_other_now">
								<text class="other_txt">正在施工</text>
							</view> -->
							<!-- <view class="button_style_other">
								<text>评价</text>
							</view> -->
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 取消订单弹出 -->
		<u-popup v-model="cancelPopup" mode="bottom" border-radius="20">
			<view class="cancel_popup">
				<view class="cancel_popup_header">
					<text>取消原因</text>
				</view>
				<evan-radio-group @change="onGroupChange" v-model="radioSelect">
					<view @click="onRadioClick(index)" class="evan-radio-show__list-item" v-for="(item,index) in radioList" :key="item">
						<text class="evan-radio-show__list-item__label">{{item}}</text>
						<evan-radio ref="listRadio" :preventClick="true" :label="item">
							<template slot="icon">
								<view>
									<uni-icons v-if="radioSelect===item" type="checkmarkempty" size="26" color="#108ee9"></uni-icons>
								</view>
							</template>
						</evan-radio>
					</view>
				</evan-radio-group>
				<textarea value="" placeholder="其他原因" class="cancel_textarea" placeholder-class="placStyle"/>
				<view class="cancel_btn">
					<text @tap='cancelBtn'>提交</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '预约订单'
				}, {
					name: '进行中',
				},{
					name: '评价',
				}],
				radioList:['计划有变，不在家','拍错了，从新下单','预约不上','联系不上师傅','后悔了，不要师傅了'],
				swiperHeight:'',
				current:0,
				swiperCurrent:0,
				cancelPopup:false,
				radioSelect: '计划有变，不在家',
			};
		},
		onLoad(e) {
			console.log(e)
			this.current = e.type
			this.swiperCurrent = e.type
			uni.getSystemInfo({
				success: (res) => {
					this.swiperHeight = res.windowHeight - uni.upx2px(80)
				}
			})
		},
		methods:{
			// swiper和Tabs切换
			change(e) {
				this.current = e
				this.swiperCurrent = e
			},
			swiperChange(e){
				this.swiperCurrent = e.detail.current
				this.current = e.detail.current
			},
			// 取消订单
			cancelOrder(){
				this.cancelPopup = true
			},
			onGroupChange(e) {
				console.log(e)
			},
			// 单选框选择
			onRadioClick(index) {
				this.$refs.listRadio[index].select()
			},
			// 取消订单
			cancelBtn(){
				uni.navigateTo({
					url:'./cancelOrderSuccess/cancelOrderSuccess'
				})
			}
		}
	}
</script>

<style lang="scss">
.swiper_box{
	background-color: #f4f8fb;
	padding: 20rpx 12rpx 0 12rpx;
}
.scroll_box{
		width: 100%;
		height: 100%;
}
.placStyle{
	color: #888888;
	font-size: 24rpx;
}
.order_list{
	width: 100%;
	height: 332rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 34rpx 19rpx 0 19rpx;
	margin-bottom: 20rpx;
	&_content{
		display: flex;
		image{
			width: 160rpx;
			height: 160rpx;
			border-radius: 5rpx;
			margin-right: 25rpx;
		}
		.content_txt{
			flex: 1;
			height: 160rpx;
			.content_txt_top{
				display: flex;
				justify-content: space-between;
				margin-bottom: 27rpx;
				text{
					color: #888888;
					font-size: 28rpx;
				}
				.top_people{
					color: #222222;
					font-size: 30rpx;
				}
			}
			.content_txt_bottom{
				margin-bottom: 19rpx;
				text{
					color: #222222;
					font-size: 28rpx;
				}
			}
		}
	}
	&_button{
		display: flex;
		justify-content: flex-end;
		margin-top: 44rpx;
		.button_style{
			display: flex;
			align-items: center;
			padding: 10rpx 20rpx;
			border: 2rpx solid #ffb685;
			border-radius: 10rpx;
			margin-right: 30rpx;
			image{
				width: 25rpx;
				height: 25rpx;
				margin-right: 10rpx;
			}
			text{
				font-size: 28rpx;
				color: #ffb685;
			}
		}
		.button_style_other,.button_style_other_now{
			padding: 10rpx 20rpx;
			border: 2rpx solid #888888;
			border-radius: 10rpx;
			text{
				font-size: 28rpx;
				color: #222222;
			}
			.other_txt{
				font-size: 28rpx;
				color: #cccccc;
			}
		}
		.button_style_other_now{
			border: 2rpx solid #cccccc;
		}
	}
}
.cancel_popup{
	width: 100%;
	height: 963rpx;
	background-color: #FFFFFF;
	padding: 40rpx 30rpx 0 30rpx;
	.cancel_popup_header{
		margin-bottom: 40rpx;
		text{
			color: #222222;
			font-size: 32rpx;
		}
	}
	.cancel_textarea{
		width: 100%;
		height: 221rpx;
		background-color: #F3F3F3;
		border-radius: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}
	.cancel_btn{
		width: 100%;
		height: 84rpx;
		background-color: #0eae64;
		text-align: center;
		border-radius: 10rpx;
		margin-top: 56rpx;
		text{
			color: #FFFFFF;
			font-size: 28rpx;
			line-height: 84rpx;
		}
	}
}
.evan-radio-show {
		padding: 20px;
		&__group-item {
			margin-bottom: 10px;
		}
		&__list-item {
			display: flex;
			align-items: center;
			height: 80rpx;
			border-bottom: 1px solid #eee;
			&__label {
				font-size: 28rpx;
				color: #222222;
				flex: 1;
				margin-right: 6px;
			}
		}
		&__list-item:last-child{
			border: none;
		}
	}
</style>
